<template>
    <page class="rel">
        <ul class="plan tc white" flex="box:mean cross:center">
            <li class="ratina-bd bdr">
                <p>剩余费积分</p>
                <span class="f16">{{userInfo.integral || 0}}</span>
            </li>
            <li class="bdr">
                <p>累计积分</p>
                <span class="f16">{{info.cumulative || 0}}</span>
            </li>
            <li>
                <p>消费积分</p>
                <span class="f16">{{info.consumption || 0}}</span>
            </li>
        </ul>
        <div class="white-bg px12 pt16 button_tab">
            <ul flex="box:mean" class="h36 tc">
                <li v-for="(i, index) in ['全部', '获得', '使用']" :key="index" @click="currentIndex = index"
                    :class="{'active': currentIndex == index}">{{i}}
                </li>
            </ul>
            <div flex class="text3 h44">
                <span flex-box="1">本月获得：{{info.monthCum}}&nbsp;&nbsp;&nbsp;&nbsp;本月使用：{{Math.abs(info.monthcon)}}</span>
                <router-link class="ml8 c2" tag="span" :to="{name: 'integrallRule'}"><i
                        class="iconfont icon-question mr4"></i>积分规则
                </router-link>
            </div>
        </div>
        <infinite class="ofay scroll" :on-infinite="onInfinite" :auto="false" ref="scroll">
            <ul class="white-bg mt10">
                <li v-for="i in list" class="h70 bdb mx12" flex="cross:center box:first">
                    <div class="tc">
                        <p class="f16">{{i.createDate | dateFormat('HH:mm:ss') }}</p>
                        <p class="f12 text3 mt6">{{i.createDate | dateFormat('YYYY-MM-DD') }}</p>
                    </div>
                    <div class="ml36">
                        <p flex="main:justify" class="f16">{{i.title}} <span>{{i.integral | plusOrminus}}</span></p>
                        <p class="text3 f14 mt6">{{i.name}}</p>
                    </div>
                </li>
            </ul>
        </infinite>
        <m-loading :show="toggle_loading" class="absfill myloading white-bg scroll"></m-loading>
    </page>
</template>
<script>
  import scroll from '@/components/scroll.vue'

  export default {
    data () {
      return {
        toggle_loading: true,
        currentIndex: 0,
        info: {},
        list: [],
        state: null,
        no_more: false
      }
    },
    async created () {
      let body = await this.$get('member/getIntegralInfoByUserId')
      this.info = body.obj
    },
    async mounted () {
      this.toggle_loading = true
      await this.$refs.scroll.reset()
      this.toggle_loading = false
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    methods: {
      async onInfinite (page) {
        const {obj: {dataList, total}} = await this.$get_delay_once('member/getIntegralListByUserId', {
          id: this.$store.getters.userInfo.id,
          page,
          state: this.state
        })
        this.list.push(...dataList)
        return this.list.length < total
      }
    },
    components: {
      scroll
    },
    watch: {
      async currentIndex (v) {
        this.page = 1
        if (v == 0) {
          this.state = null
        } else if (v == 1) {
          this.state = true
        } else {
          this.state = false
        }
        this.list = []
        this.toggle_loading = true
        await this.$refs.scroll.reset()
        this.toggle_loading = false
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .plan {
        background-color: #409eff;
        height: 110px;
        li {
            border-color: rgba(255, 255, 255, 0.36);
            span {
                display: block;
                margin-top: 20px;
            }
        }
    }

    .button_tab {
        $color: #409eff;
        li {
            background-color: #ececec;
            color: #999999;
        }
        .active {
            background-color: $color;
            color: white;
        }
    }

    .scroll {
        position: absolute;
        top: 206px;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
    }
</style>
